<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>First programs in Qt4</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, First programs in Qt4, Qt4 library, C++">
<meta name="description" content="In this chapter of the Qt4 tutorial, we will create
our first programs in Qt4">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5536206-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>First programs in Qt4</h1>

<p>
In this part of the Qt4 C++ programming tutorial, we will create 
our first programs.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
We will display an application icon, a tooltip and various mouse cursors. 
We will center a window on the screen and introduce the signal &amp;
slot mechanism.
</p>


<h2>Simple example</h2>

<p>
We start with a very simple example. 
</p>

<pre class="code">
#include &lt;QApplication&gt;
#include &lt;QWidget&gt;

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QWidget window;

    window.resize(250, 150);
    window.setWindowTitle("Simple example");
    window.show();

    return app.exec();
}
</pre>

<p>
We will show a basic window on the screen. 
</p>

<pre class="explanation">
#include &lt;QApplication&gt;
#include &lt;QWidget&gt;
</pre>

<p>
We include necessary header files. 
</p>

<pre class="explanation">
QApplication app(argc, argv);
</pre>

<p>
This is the application object. Each application  programmed in Qt4 must 
have this object. Except for 
console applications. 
</p>

<pre class="explanation">
QWidget window;
</pre>

<p>
This is our main widget. 
</p>

<pre class="explanation">
 window.resize(250, 150);
 window.setWindowTitle("Simple example");
 window.show();
</pre>

<p>
Here we resize the widget. Set a title for our main window. In this case, 
the <code>QWidget</code> is our main window. And finally show 
the widget on the screen. 
</p>

<pre class="explanation">
 return app.exec();
</pre>

<p>
We start the main loop of the application.
</p>


<img src="/img/gui/qt4/simple.png" alt="Simple example">
<div class="figure">Figure: Simple example</div>


<h2>Centering the window</h2>

<p>
If we do not position the window ourselves, the window manager will 
position it for us. In the next example, we will center the window.
</p>

<pre class="code">
#include &lt;QApplication&gt;
#include &lt;QDesktopWidget&gt;
#include &lt;QWidget&gt;

int main(int argc, char *argv[])
{

  int WIDTH = 250;
  int HEIGHT = 150;

  int screenWidth;
  int screenHeight;

  int x, y;

  QApplication app(argc, argv);

  QWidget window;

  QDesktopWidget *desktop = QApplication::desktop();

  screenWidth = desktop->width();
  screenHeight = desktop->height(); 

  x = (screenWidth - WIDTH) / 2;
  y = (screenHeight - HEIGHT) / 2;

  window.resize(WIDTH, HEIGHT);
  window.move( x, y );
  window.setWindowTitle("Center");
  window.show();

  return app.exec();
}
</pre>

<p>
There are plenty of monitor sizes and resolution types. In order to 
center a window, we must determine the desktop width and height. 
For this, we use the <code>QDesktopWidget</code> class.
</p>

<pre class="explanation">
QDesktopWidget *desktop = QApplication::desktop();

screenWidth = desktop->width();
screenHeight = desktop->height(); 
</pre>

<p>
Here we determine the screen width and height. 
</p>

<pre class="explanation">
x = (screenWidth - WIDTH) / 2;
y = (screenHeight - HEIGHT) / 2;
</pre>

<p>
Here we compute the upper left point of our centered window. 
</p>

<pre class="explanation">
window.resize(WIDTH, HEIGHT);
window.move( x, y );
</pre>

<p>
We resize the widget and move it to the computed position. Note, 
that we must first resize the widget. We move it afterwards. 
</p>


<h2>A tooltip</h2>

<p>
A tooltip is a specific hint about a tool in an application. The 
following example will demonstrate, how we can 
create a tooltip in Qt4 programming library. 
</p>

<pre class="code">
#include &lt;QApplication&gt;
#include &lt;QWidget&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  QWidget window;

  window.resize(250, 150);
  window.move(300, 300);
  window.setWindowTitle("ToolTip");
  window.setToolTip("QWidget");
  window.show();

  return app.exec();
}
</pre>

<p>
Creating a tooltip is easy. All we do is call the <code>setToolTip()</code> method.
</p>

<pre class="explanation">
window.setWindowTitle("ToolTip");
</pre>

<p>
We set a tooltip for the <code>QWidget</code> widget.
</p>

<img src="/img/gui/qt4/tooltip.png" alt="A tooltip">
<div class="figure">Figure: A tooltip</div>



<h2>The application icon</h2>

<p>
In the next example, we show the application icon. Most window managers 
display the icon in the left corner of the titlebar and also on the taskbar.
</p>

<pre class="code">
#include &lt;QApplication&gt;
#include &lt;QWidget&gt;
#include &lt;QIcon&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  QWidget window;

  window.resize(250, 150);
  window.move(300, 300);
  window.setWindowTitle("icon");
  window.setWindowIcon(QIcon("web.png"));
  window.show();

  return app.exec();
}
</pre>

<p>
An icon is shown in the upper left corner of the window.
</p>

<pre class="explanation">
window.setWindowIcon(QIcon("web.png"));
</pre>

<p>
To display an icon, we use the <code>setWindowIcon()</code> 
method and a <code>QIcon</code> class. The icon is a small
PNG file located in the current working directory.
</p>

<img src="/img/gui/qt4/icon.png" alt="Icon">
<div class="figure">Figure: Icon</div>


<h2>Cursors</h2>

<p>
A cursor is a small icon that indicates the position of the 
mouse pointer. In the next example will show various cursors
that we can use in our programs. 
</p>

<pre class="code">
#include &lt;QApplication&gt;
#include &lt;QWidget&gt;
#include &lt;QFrame&gt;
#include &lt;QGridLayout&gt;


class Cursors : public QWidget
{
 public:
     Cursors(QWidget *parent = 0);
};


Cursors::Cursors(QWidget *parent)
    : QWidget(parent)
{  
  QFrame *frame1 = new QFrame(this);
  frame1->setFrameStyle(QFrame::Box);
  frame1->setCursor(Qt::SizeAllCursor);

  QFrame *frame2 = new QFrame(this);
  frame2->setFrameStyle(QFrame::Box);
  frame2->setCursor(Qt::WaitCursor);

  QFrame *frame3 = new QFrame(this);
  frame3->setFrameStyle(QFrame::Box);
  frame3->setCursor(Qt::PointingHandCursor);

  QGridLayout *grid = new QGridLayout(this);
  grid->addWidget(frame1, 0, 0);
  grid->addWidget(frame2, 0, 1);
  grid->addWidget(frame3, 0, 2);

  setLayout(grid);
}


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Cursors window;

  window.resize(350, 150);
  window.move(300, 300);  
  window.setWindowTitle("cursors");
  window.show();

  return app.exec();
}
</pre>

<p>
In this example, we will use three <code>QFrames</code>. Each of the 
frames will have a different cursor defined. 
</p>

<pre class="explanation">
QFrame *frame1 = new QFrame(this);
frame1->setFrameStyle(QFrame::Box);
frame1->setCursor(Qt::SizeAllCursor);
</pre>

<p>
This will create a frame widget. We set a specific frame style and a cursor type. 
</p>

<pre class="explanation">
QGridLayout *grid = new QGridLayout(this);
grid->addWidget(frame1, 0, 0);
grid->addWidget(frame2, 0, 1);
grid->addWidget(frame3, 0, 2);
setLayout(grid);
</pre>

<p>
This will group all the frames. We will talk more about this in the
layout management section. 
</p>


<h2>A button</h2>

<p>
In the next code example, we display a push button on the window. 
By clicking on the button we close the application. 
</p>

<pre class="code">
#include &lt;QApplication&gt;
#include &lt;QWidget&gt;
#include &lt;QPushButton&gt;

class MyButton : public QWidget
{
 public:
     MyButton(QWidget *parent = 0);
};

MyButton::MyButton(QWidget *parent)
    : QWidget(parent)
{   
  QPushButton *quit = new QPushButton("Quit", this);
  quit->setGeometry(50, 40, 75, 30);

  connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));
}


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  MyButton window;

  window.resize(250, 150);
  window.move(300, 300);
  window.setWindowTitle("button");
  window.show();

  return app.exec();
}
</pre>

<p>
In this code example, we use the concept of the signals
&amp; slots for the first time.
</p>

<pre class="explanation">
QPushButton *quit = new QPushButton("Quit", this);
quit->setGeometry(50, 40, 75, 30);
</pre>

<p>
We create a new <code>QPushButton</code>. We manually place it 
to the x:50px, y:40px position and resize it
to width:75px, height:30px.
</p>

<pre class="explanation">
connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));
</pre>

<p>
When we click on the button, a <code>clicked()</code> signal is 
generated. The <b>slot</b> is the method, which will react to the signal. 
In our case it is the <code>quit()</code> slot of the main 
application object. The <code>qApp</code> is a global pointer 
to the application object. It is defined in the
<code>QApplication</code> header file. 
</p>


<img src="/img/gui/qt4/button.png" alt="A button">
<div class="figure">Figure: A button</div>


<h2>Communicate</h2>

<p>
We will finish this section showing, how widgets can communicate together. 
We will split the code into three files. So far we have used only one file.
This is possible only in small examples. Now we will have three source files.
</p>

<div class="codehead">communicate.h</div>
<pre class="code">
#ifndef COMMUNICATE_H
#define COMMUNICATE_H

#include &lt;QWidget&gt;
#include &lt;QApplication&gt;
#include &lt;QPushButton&gt;
#include &lt;QLabel&gt;

class Communicate : public QWidget
{
  Q_OBJECT

  public:
    Communicate(QWidget *parent = 0);


  private slots:
    void OnPlus();
    void OnMinus();

  private:
    QLabel *label;

};

#endif
</pre>

<p>
This is the header file of the example. In this file, we define two 
slots and a label widget. 
</p>

<div class="codehead">communicate.cpp</div>
<pre class="code">
#include "communicate.h"

Communicate::Communicate(QWidget *parent)
    : QWidget(parent)
{
  QPushButton *plus = new QPushButton("+", this);
  plus->setGeometry(50, 40, 75, 30);

  QPushButton *minus = new QPushButton("-", this);
  minus->setGeometry(50, 100, 75, 30);

  label = new QLabel("0", this);
  label->setGeometry(190, 80, 20, 30);

  connect(plus, SIGNAL(clicked()), this, SLOT(OnPlus()));
  connect(minus, SIGNAL(clicked()), this, SLOT(OnMinus()));
}

void Communicate::OnPlus()
{
  int val = label->text().toInt();
  val++;
  label->setText(QString::number(val));
}

void Communicate::OnMinus()
{
  int val = label->text().toInt();
  val--;
  label->setText(QString::number(val));
}
</pre>

<p>
We have two push buttons and a label widget. We increase/decrease 
the number displayed by the label with
the buttons. 
</p>

<pre class="explanation">
connect(plus, SIGNAL(clicked()), this, SLOT(OnPlus()));
connect(minus, SIGNAL(clicked()), this, SLOT(OnMinus()));
</pre>

<p>
Here we connect the clicked() signals to the slots. 
</p>

<pre class="explanation">
void Communicate::OnPlus()
{
  int val = label->text().toInt();
  val++;
  label->setText(QString::number(val));
}
</pre>

<p>
In the <code>OnPlus()</code> method, we determine the current 
value of the label. The label widget displays a string value, so we must 
convert it to the integer. We increase the number and set a new text 
for the label. We convert a number to the string value. 
</p>


<div class="codehead">main.cpp</div>
<pre class="code">
#include "communicate.h"

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);

  Communicate window;

  window.setWindowTitle("Communicate");
  window.show();

  return app.exec();
}
</pre>

<p>
This is the main file of the code example.
</p>

<img src="/img/gui/qt4/communicate.png" alt="Communicate">
<div class="figure">Figure: Communicate</div>

<p>
In this chapter, we created our first programs in Qt4.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 23, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
